---
topTitle: Components
title: Progress
icon: fa fa-file
scripts:
- Metis.MetisProgress()
---
<div class="row">
  <div class="col-lg-12">
    <div class="box">
      <header>
	<h5>Basic Progress Bar <small>Click the bar for show source code</small></h5>
	<div class="toolbar">
	  <div class="progress mini">
	      <div class="progress-bar" style="width: 43%;"></div>
	  </div>
	</div>
	<!-- /.toolbar -->
      </header>
      <div class="body">
	      <div class="progress">
		<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
		  <span class="sr-only">60% Complete</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress">
		<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
		  <span class="sr-only">20% Complete</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress">
		<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		  <span class="sr-only">40% Complete (success)</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress">
		<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
		  <span class="sr-only">60% Complete (warning)</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress">
		<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
		  <span class="sr-only">80% Complete</span>
		</div>
	      </div>
	      <!-- /.progress -->
      </div>
      <!-- /.body -->
    </div>
    <!-- /.box -->
  </div>
  <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

<div class="row">
  <div class="col-lg-12">
    <div class="box">
      <header>
	<h5>Striped Progress Bar <small>Click the bar for show source code</small></h5>
	<div class="toolbar">
	  <div class="progress mini progress-striped">
	      <div class="progress-bar" style="width: 43%;"></div>
	  </div>
	</div>
	<!-- /.toolbar -->
      </header>
      <div class="body">
	      <div class="progress progress-striped">
		<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
		  <span class="sr-only">60% Complete</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress progress-striped">
		<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
		  <span class="sr-only">20% Complete</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress progress-striped">
		<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		  <span class="sr-only">40% Complete (success)</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress progress-striped">
		<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
		  <span class="sr-only">60% Complete (warning)</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress progress-striped">
		<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
		  <span class="sr-only">80% Complete</span>
		</div>
	      </div>
	      <!-- /.progress -->
      </div>
      <!-- /.body -->
    </div>
    <!-- /.box -->
  </div>
  <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

<div class="row">
  <div class="col-lg-12">
    <div class="box">
      <header>
	<h5>Animated Striped Progress Bar <small>Click the bar for show source code</small></h5>
	<div class="toolbar">
	  <div class="progress mini progress-striped active">
	      <div class="progress-bar" style="width: 43%;"></div>
	  </div>
	</div>
	<!-- /.toolbar -->
      </header>
      <div class="body">
	      <div class="progress progress-striped active">
		<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
		  <span class="sr-only">60% Complete</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress progress-striped active">
		<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
		  <span class="sr-only">20% Complete</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress progress-striped active">
		<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		  <span class="sr-only">40% Complete (success)</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress progress-striped active">
		<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
		  <span class="sr-only">60% Complete (warning)</span>
		</div>
	      </div>
	      <!-- /.progress -->
	      <div class="progress progress-striped active">
		<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
		  <span class="sr-only">80% Complete</span>
		</div>
	      </div>
	      <!-- /.progress -->
      </div>
      <!-- /.body -->
    </div>
    <!-- /.box -->
  </div>
  <!-- /.col-lg-12 -->
</div>
<!-- /.row -->


<div class="row">
  <div class="col-lg-12">
    <div class="box">
      <header>
	<h5>Stacked Progress Bar <small>Click the bar for show source code</small></h5>
	<div class="toolbar">
	  <div class="progress mini">
	    <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
	    <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
	    <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
	  </div>
	</div>
	<!-- /.toolbar -->
      </header>
      <div class="body">
	<div class="progress">
	  <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
	  <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
	  <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
	</div>
	<!-- /.progress -->
      </div>
      <!-- /.body -->
    </div>
    <!-- /.box -->
  </div>
  <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

<div class="row">
  <div class="col-lg-12">
    <div class="box">
      <header>
	<h5>Progress Bar Size <small>Click the bar for show source code</small></h5>
	<div class="toolbar">
	  <div class="progress mini progress-striped active">
	      <div class="progress-bar" style="width: 43%;"></div>
	  </div>
	</div>
	<!-- /.toolbar -->
      </header>
      <div class="body">

	<div class="row">
	  <div class="col-lg-3">Default</div>
	  <!-- /.col-lg-3 -->
	  <div class="col-lg-9">
	    <div class="progress">
	      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
		<span class="sr-only">60% Complete</span>
	      </div>
	    </div>
	    <!-- /.progress -->
	  </div>
	  <!-- /.col-lg-9 -->
	</div>
	<!-- /.row -->

	<div class="row">
	  <div class="col-lg-3">large</div>
	  <!-- /.col-lg-3 -->
	  <div class="col-lg-9">
	    <div class="progress lg">
	      <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
		<span class="sr-only">60% Complete</span>
	      </div>
	    </div>
	    <!-- /.progress -->
	  </div>
	  <!-- /.col-lg-9 -->
	</div>
	<!-- /.row -->

	<div class="row">
	  <div class="col-lg-3">Middle</div>
	  <!-- /.col-lg-3 -->
	  <div class="col-lg-9">
	    <div class="progress md">
	      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
		<span class="sr-only">20% Complete</span>
	      </div>
	    </div>
	    <!-- /.progress -->
	  </div>
	  <!-- /.col-lg-9 -->
	</div>
	<!-- /.row -->

	<div class="row">
	  <div class="col-lg-3">Mini</div>
	  <!-- /.col-lg-3 -->
	  <div class="col-lg-9">
	    <div class="progress xs">
	      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		<span class="sr-only">40% Complete (success)</span>
	      </div>
	    </div>
	    <!-- /.progress -->
	  </div>
	  <!-- /.col-lg-9 -->
	</div>
	<!-- /.row -->
      </div>
      <!-- /.body -->
    </div>
    <!-- /.box -->
  </div>
  <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
